<template>
    <div class="phone-check" id="phoneCheck">
        <input id="phone" phone="phone" class="phone-input" v-model="phone" placeholder="请输入手机号码" type="number" @blur="phoneInputBlur" @focus="focusFn">
        <label v-if="content.phoneWarnShow &&content.isShowRedWarn" class="phone-error" for="phone">{{content.phoneWarnText}}</label>
        <img v-if="content.closeContent" class="booking_close_button" src="../../../assets/images/common/booking_close_button.png" @click="phone=null" />
    </div>
</template>
<!--使用方法<div slot="cantClick" @click="sureGetLocationFn" class="com_black"></div>-->
<script>
    export default {
        name: "phoneCheck",
        props:{
            porpsContent:{
                type:Object
            },
            phoneNumProps:String|Number,
        },
        data(){
            return{
                phone:null,
                content:{
                    phoneWarnText:'手机号码格式错误',
                    isShowRedWarn:true,
                    isShowToastWarn:true,
                    phoneWarnShow:true,
                    closeContent:true,
                }
            }
        },
        created(){
            this.content = Object.assign({},this.content,this.porpsContent);
            this.phone = this.phoneNumProps || this.phone;
        },
        methods:{
            phoneInputBlur(){
                this.iosBlur()
                if(this.content.isShowToastWarn){
                    if( !/^1\d{10}$/ig.test(this.phone) ){
                        if(this.phone && this.phone.toString().length > 0){
                            this.$root.$emit('toast', {msg: this.content.phoneWarnText});
                            this.content.phoneWarnShow = true;
                        }
                    }else{
                        this.$emit("isCanGetCodeFn");
                    }
                }
            },
            focusFn(){
                this.$emit('phoneFocusFn');
            }
        },
        watch:{
            phone:function(val){
                if(val && val.length>=11){
                    this.phone = val.slice(0,11);
                }
                let obj = {};
                if(/^1\d{10}$/ig.test(this.phone)){
                    /*给父组件传递手机号，手机号是否符合要求*/
                    obj = {phoneNum:this.phone,phoneTrue:true};
                    this.$emit("changeCheck",obj);
                    this.content.phoneWarnShow = false;
                }else{
                    obj = {phoneNum:this.phone,phoneTrue:false};
                    this.$emit("changeCheck",obj);
                }
                this.$emit("isCanGetCodeFn");
            },
            phoneNumProps(val){
                this.phone = val || this.phone;
            }
        }
    }
</script>

<style scoped>
    .phone-check{
        position: relative;
        width: 100%;
    }
    .phone-input{
        width: 100%;
        height: .4rem;
        line-height: .4rem;
        border-radius: 5px;
        border: 1px solid #d7d7d7;
        padding-left: .2rem;
        margin-top: .12rem;
    }
    .phone-error{
        position: absolute;
        bottom: -.2rem;
        color: red;
        font-size: .11rem;
        left: .2rem;
        z-index: 10;
    }
    .booking_close_button{
        width: .34rem;
        height: .34rem;
        right: 0;
        padding: .1rem;
        position: absolute;
        top: .15rem;
        margin: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .phone-input::-webkit-input-placeholder{
        color: #CCCCCC;
    }
    .phone-input::placeholder{
        color: #CCCCCC;
    }
</style>